<script>
export default {
  data() {
    return {
      baoid:null,
      servicePackage: {},
      tableDate:[],
      hobby:[],
    };
  },
  methods: {
    submitForm(){
      this.$router.push('/fwb')
    },
    a1(){
      this.baoid=JSON.parse(localStorage.getItem("id"));
      this.axios.get(`http://localhost:8302/bao/findbao?id=${this.baoid}`).then(res=>{
          this.servicePackage=res.data.data;
          this.hobby=this.servicePackage.biaoqian.split(',');
      })
    },
    a2(){
      this.axios.get(`http://localhost:8302/bao/selbyxid?id=${this.baoid}`).then(res=>{
        this.tableDate=res.data.data;
      })
    },
  },
  created() {
    this.a1();
    this.a2();
  }
};
</script>

<template>
  <div class="c">
    <el-container>
      <el-header align="left" style="margin-top: 60px"> |  服务详情页面</el-header>
      <el-main style="width: 100%;">
        <el-row align="center">
          <el-col :span="10" class="a"  style="margin-top: 80px;background-color: #F2F7FB;">
          <span>
            <img :src="servicePackage.img" width="60%">
          </span>
          </el-col>
          <el-col :span="10" class="a"  style="background-color: #F2F7FB" align="left">
            <el-form label-width="120px">
              <el-form-item label="服务包名称">
                <span>{{ servicePackage.name }}</span>
              </el-form-item>
              <el-form-item label="使用状态">
                <span>{{ servicePackage.zt==0 ? '待审核' : servicePackage.zt==1 ? '使用中' : servicePackage.zt==2 ? '已驳回' : servicePackage.zt==3 ? '已停用' : '' }}</span>
              </el-form-item>
              <el-form-item label="订购定价">
                <span>{{ servicePackage.price }}</span>
              </el-form-item>
              <el-form-item label="服务对象">
                <span>{{ servicePackage.fwdx }}</span>
              </el-form-item>
              <el-form-item label="签约周期">
                <span>{{ servicePackage.qytime }}</span>
              </el-form-item>
            </el-form>
            <el-form label-width="120px">
              <el-form-item label="服务介绍">
                <span>{{ servicePackage.fwjs }}</span>
              </el-form-item>
              <el-form-item label="服务标签">
                <el-form-item v-for="(item,index) in hobby" :key="index">
                  <span>{{ item }}</span>
                </el-form-item>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col style="background-color: #F2F7FB">
            <h6 align="left" style="margin-left: 30px;background-color: #F2F7FB">服务项目</h6>
            <el-table
                width="100%"
                :data="tableDate"
                stripe>
              <el-table-column
                  prop="id"
                  label="项目编号">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="项目名称">
              </el-table-column>
              <el-table-column
                  label="次数">
                <template slot-scope="scope">
                  {{ scope.row.num }} 次
                </template>
              </el-table-column>
              <el-table-column
                  prop="xmlx"
                  label="项目类型">
              </el-table-column>
              <el-table-column
                  prop="xmjs"
                  label="项目介绍">
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class="a" align="right">
<!--            <el-button type="danger" @click="qx">取消</el-button>-->
            <el-button type="primary" @click="submitForm" style="margin-right: 200px;width: 100px;">返回</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

  </div>

</template>

<style>
.a{
  background-color: #FFFFFF;
}
</style>
